<template>
  <el-aside width="220px" class="image-aside" v-loading="loading">
    <div class="top">
    
      <AsideList :active="activeId==item.id" v-for="(item,index) in list" :key="index" @edit="handleEdit(item)" @delete="handleDelete(item.id)" @click="handleChangeActiveId(item.id)">
        {{item.name}}
      </AsideList>

    </div>
    <div class="bottom">
      <el-pagination background layout="prev, next" :total="total" :current-page="currentPage" :page-size="limit" @current-change="getData"/>
    </div>
  </el-aside>
  <FormDrawer :title="drawerTitle" ref="formDrawerRef" @submit="handleSubmit">
    <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="order">
        <el-input-number v-model="form.order" :min="0" :max="1000" />
      </el-form-item>
      
    </el-form>
    
  </FormDrawer>
</template>

<script setup>
import { ref,reactive,computed } from "vue"
import AsideList from './AsideList.vue';
import { getImageClassList,createImageClass,updateImageClass,deleteImageClass } from "~/api/image_class.js"
import FormDrawer from './FormDrawer.vue'
import { toast } from "~/composables/util.js";

//加载动画
const loading = ref(false)



//分页部分
const currentPage = ref(1)  //当前页   页码
const total = ref(0)        //总条数
const limit = ref(10)       //每页显示数量
const list = ref([])


//获取数据
function getData(P =null){
  //console.log(p);
  if(typeof P == "number"){ 
    currentPage.value = P
  }

  loading.value = true
  getImageClassList(currentPage.value)
  .then(res=>{
    //console.log(res);
    total.value = res.totalCount
    list.value = res.list
    let item = list.value[0]
    if(item){
      //activeId.value = item.id
      handleChangeActiveId(item.id)
    }
  }).finally(()=>{
    loading.value=false
  })
}

getData()

const editId = ref(0)
const drawerTitle = computed(()=>editId.value ? "修改" : "新增")
//抽屉组件使用
const formDrawerRef = ref(null)



const form = reactive({
  name:"",
  order:50
})
const rules = {
  name: [{
    required: true, message: '图库分类名称不能为空', trigger: 'blur'
  }],
}
const formRef = ref(null)
const handleSubmit =()=>{
  //console.log('提交');
  formRef.value.validate((valid)=>{
    if(!valid) return
    //console.log("提交成功");

    formDrawerRef.value.showLoading()

    const fun = editId.value ? updateImageClass(editId.value,form) : createImageClass(form)
    fun.then(res=>{
      toast(drawerTitle.value + '成功')
      getData(editId.value ? currentPage.value : 1)
      formDrawerRef.value.close()
    }).finally(()=>{
      formDrawerRef.value.hideLoading()
    })
  })
}

const handleCreate = ()=>{
  editId.value = 0
  form.name=""
  form.order=50
  formDrawerRef.value.open()
}


//触发编辑
const handleEdit = (row)=>{
  //console.log(row);
  editId.value = row.id
  form.name = row.name
  form.order = row.order
  formDrawerRef.value.open()
}

//触发删除
const handleDelete = (id)=>{
  loading.value = true
  deleteImageClass(id)
  .then(res=>{
    //console.log(res);
    toast("删除成功")
    getData()
  }).finally(()=>{
    loading.value = false
  })
}

//选中图库分类ID
const activeId = ref(0)
const emits = defineEmits(["change"])
//切换分类的方法
function handleChangeActiveId(id){
  activeId.value = id
  emits("change",id)
}

//将方法暴露到父组件使用
defineExpose({
  handleCreate
})


</script>

<style lang='scss'>
.image-aside {
  border-right: 1px solid #eee;
  position: relative;
  .top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50px;
    overflow-y: auto;
  }
  .bottom {
    @apply flex items-center justify-center;
    position: absolute;
    height: 50px;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

</style>